<!--
 * @Author: Rain
 * @Date: 2021-11-25 16:22:20
 * @LastEditTime: 2024/01/18 14:49:30
 * @Description: Do Something
-->
<template>
  <div class="app-container w-full h-full overflow-hidden">
    <!--工具栏-->
    <div class="head-container head-container w-full h-full flex flex-col overflow-hidden">
      <div
        class="flex items-center flex-end search w-full grid grid-cols-4 gap-10"
        style="padding-bottom: 10px"
      >
        <!-- 搜索 -->
        <div class="flex items-center">
          <label
            class="el-form-item-label min-w-90"
            style="min-width: 100px"
          >身份</label>
          <el-select
            v-model="query.identityNo"
            class="w-full"
            clearable
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="item in identityList"
              :key="item.itemId"
              :label="item.title"
              :value="item.itemNo"
            />
          </el-select>
        </div>

        <div class="flex items-center w-full">
          <label
            class="el-form-item-label whitespace-nowrap"
            style="min-width: 100px"
          >锁客归属人</label>
          <el-input
            v-model="query.superiorMobile"
            class="flex-1"
            placeholder="手机号/微信名"
          />
        </div>
        <div class="flex items-center">
          <label
            class="el-form-item-label whitespace-nowrap min-w-90"
            style="min-width: 100px"
          >锁客归属部门</label>
          <el-select
            v-model="query.partnerId"
            class="w-full"
            clearable
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="item in partnerList"
              :key="item.partnerId"
              :label="item.partnerName"
              :value="item.partnerId"
            />
          </el-select>
        </div>
        <div class="flex items-center">
          <label
            class="el-form-item-label"
            style="min-width: 100px"
          >微信昵称</label>
          <el-input
            v-model="query.nickname"
            class="flex-1"
            placeholder="微信昵称"
          />
        </div>
        <div class="flex items-center">
          <label
            class="el-form-item-label min-w-90"
            style="min-width: 100px"
          >手机号</label>
          <el-input
            v-model="query.mobile"
            class="flex-1"
            placeholder="手机号/微信名"
          />
        </div>
        <div class="flex items-center">
          <label
            class="el-form-item-label"
            style="min-width: 100px"
          >姓名</label>
          <el-input
            v-model="query.realName"
            class="flex-1"
            placeholder="姓名"
          />
        </div>
        <div class="flex items-center">
          <label
            class="el-form-item-label min-w-90"
            style="min-width: 100px"
          >是否休眠</label>
          <el-select
            v-model="query.dormant"
            class="w-full"
            clearable
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="item in [
                { label: '是', value: 1 },
                { label: '否', value: 0 },
              ]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="w-full flex items-center justify-center">
          <rrOperation :crud="crud" />
        </div>
      </div>
      <div class="w-full flex-1 overflow-hidden">
        <el-table
          ref="table"
          v-loading="crud.loading"
          :data="crud.data"
          height="100%"
          size="small"
          style="width: 100%"
          @selection-change="crud.selectionChangeHandler"
        >
          <el-table-column
            label="#"
            type="index"
          />
          <el-table-column
            label="身份"
            prop="identityNo"
          >
            <template slot-scope="{ row }">
              <span>{{ row.identityNo | getIdentity(identityList) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="微信昵称"
            prop="nickname"
          />
          <el-table-column
            label="姓名"
            prop="realName"
          />
          <el-table-column
            label="手机号"
            prop="mobile"
          />
          <el-table-column
            label="锁客归属人"
            prop="superiorRealName"
          />
          <el-table-column
            label="归属人手机号"
            prop="superiorMobile"
          />
          <el-table-column label="锁客链条">
            <template slot-scope="{ row }">
              <el-button
                size="mini"
                type="primary"
                @click="viewLock(row)"
              >查看</el-button>
            </template>
          </el-table-column>
          <el-table-column
            label="锁客归属部门"
            prop="realName"
          />
          <el-table-column
            label="从属等级"
            prop="realName"
          />
          <el-table-column
            label="休眠"
            prop="dormant"
          >
            <template slot-scope="{ row }">{{ row.dormant ? "是" : "否" }}</template>
          </el-table-column>
          <el-table-column
            label="课程权益"
            prop="realName"
          >
            <template slot-scope="{ row }">
              <el-button
                size="mini"
                type="primary"
                @click="viewCourse(row)"
              >查看</el-button>
            </template>
          </el-table-column>
          <el-table-column
            v-if="checkPer(['admin', 'wxUser:edit', 'wxUser:del'])"
            align="center"
            fixed="right"
            label="操作"
            width="400px"
          >
            <template slot-scope="{ row }">
              <div class="flex items-center">
                <el-button
                  size="mini"
                  style="margin-right: 10px"
                  type="primary"
                  @click="viewUser(row, 1)"
                >身份更改</el-button>
                <el-button
                  size="mini"
                  style="margin-right: 10px"
                  type="primary"
                  @click="viewUser(row, 2)"
                >归属人更改</el-button>
                <el-button
                  size="mini"
                  style="margin-right: 10px"
                  type="primary"
                  @click="viewUser(row, 3)"
                >初始门票</el-button>
                <el-button
                  size="mini"
                  type="primary"
                  @click="viewUser(row, 4)"
                >门票更改</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--分页组件-->
      <pagination />
    </div>
    <!--锁客链条-->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="showLock"
      title="锁客链条"
      width="500px"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="80px"
        size="small"
      >
        <el-form-item label="status">
          <el-input
            v-model="form.status"
            style="width: 370px"
          />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input
            v-model="form.mobile"
            style="width: 370px"
          />
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="text"
          @click="crud.cancelCU"
        >取消</el-button>
        <el-button
          :loading="crud.status.cu === 2"
          type="primary"
          @click="crud.submitCU"
        >确认</el-button>
      </div>
    </el-dialog>
    <!--身份更改-->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="showIdentity"
      title="更改身份"
      width="500px"
    >
      <el-form
        ref="form"
        :model="form"
        label-width="100px"
        size="small"
      >
        <el-form-item label="名字">
          <el-input
            v-model="form.realName"
            readonly
            style="width: 370px"
          />
        </el-form-item>
        <el-form-item label="微信昵称">
          <el-input
            v-model="form.nickname"
            readonly
            style="width: 370px"
          />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input
            v-model="form.mobile"
            readonly
            style="width: 370px"
          />
        </el-form-item>
        <el-form-item label="当前身份">
          <el-input
            v-model="form.identity"
            readonly
            style="width: 370px"
          />
        </el-form-item>
        <el-form-item label="身份更改为">
          <el-select
            v-model="form.identityNo"
            class="w-full"
            clearable
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="item in identityList"
              :key="item.itemId"
              :label="item.title"
              :value="item.itemNo"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          style="margin-right: 10px"
          type="default"
          @click="showIdentity = false"
        >取消</el-button>
        <el-button
          type="primary"
          @click="doAction(1)"
        >确认</el-button>
      </div>
    </el-dialog>
    <!--归属人更改-->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="showPartner"
      title="更改归属人"
      width="600px"
    >
      <el-form
        ref="form"
        :model="form"
        label-width="130px"
        size="small"
      >
        <el-form-item label="名字">
          <el-input
            v-model="form.realName"
            readonly
            style="width: 370px"
          />
        </el-form-item>
        <el-form-item label="微信昵称">
          <el-input
            v-model="form.nickname"
            readonly
            style="width: 370px"
          />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input
            v-model="form.mobile"
            readonly
            style="width: 370px"
          />
        </el-form-item>
        <el-form-item label="状态">
          <span
            style="
              width: 370px;
              display: inline-block;
              border: 1px solid rgba(125, 125, 125, 0.5);
              padding-left: 15px;
              border-radius: 5px;
            "
          >{{ !form.dormant ? "正常" : "休眠" }}</span>
        </el-form-item>
        <el-form-item label="当前归属人">
          <el-input
            v-model="form.defaultOwnerName"
            readonly
            style="width: 370px"
          />
        </el-form-item>
        <el-form-item label="当前归属人手机号">
          <el-input
            v-model="form.defaultOwnerMobile"
            readonly
            style="width: 370px"
          />
        </el-form-item>
        <el-form-item label="归属人更改为">
          <el-select
            v-model="form.superiorNickName"
            :remote-method="getUser"
            clearable
            filterable
            placeholder="输入手机号查询"
            remote
            style="width: 370px"
            @change="changeUser"
          >
            <el-option
              v-for="item in userList"
              :key="item.id"
              :label="`${item.realName}/${item.mobile}`"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="更改归属人">
          <el-input
            v-model="form.superiorRealName"
            readonly
            style="width: 370px"
          />
        </el-form-item>
        <el-form-item label="归属人手机号">
          <el-input
            v-model="form.superiorMobile"
            readonly
            style="width: 370px"
          />
        </el-form-item>
        <el-form-item label="归属人昵称">
          <el-input
            v-model="form.superiorNickName"
            readonly
            style="width: 370px"
          />
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          style="margin-right: 10px"
          type="default"
          @click="showPartner = false"
        >取消</el-button>
        <el-button
          type="primary"
          @click="doAction(2)"
        >确认</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="showTicket"
      title="初始门票"
      width="600px"
    >
      <el-form
        ref="form"
        :model="form"
        label-width="130px"
        size="small"
      >
        <el-form-item label="名字">
          <el-input
            v-model="form.realName"
            readonly
            style="width: 370px"
          />
        </el-form-item>
        <el-form-item label="微信昵称">
          <el-input
            v-model="form.nickname"
            readonly
            style="width: 370px"
          />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input
            v-model="form.mobile"
            readonly
            style="width: 370px"
          />
        </el-form-item>
        <el-form-item label="状态">
          <span
            style="
              width: 370px;
              display: inline-block;
              border: 1px solid rgba(125, 125, 125, 0.5);
              padding-left: 15px;
              border-radius: 5px;
            "
          >{{ !form.dormant ? "正常" : "休眠" }}</span>
        </el-form-item>
        <el-form-item label="初始门票">
          <el-input
            v-model="form.ticketNumber"
            style="width: 370px"
          />
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          style="margin-right: 10px"
          type="default"
          @click="showTicket = false"
        >取消</el-button>
        <el-button
          type="primary"
          @click="doAction(3)"
        >确认</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="showChange"
      title="更改门票"
      width="600px"
    >
      <el-form
        ref="changeForm"
        :model="targetUser"
        label-width="130px"
        size="small"
      >
        <el-form-item
          :rules="[{ required: true, message: '门票用户不能为空'}]"
          label="门票用户"
          prop="mobile"
        >
          <el-select
            v-model="targetUser.mobile"
            :remote-method="getUser"
            clearable
            filterable
            placeholder="输入手机号查询"
            remote
            style="width: 370px"
            @change="changeTicketUser"
          >
            <el-option
              v-for="item in userList"
              :key="item.id"
              :label="`${item.realName}/${item.mobile}`"
              :value="item.openId"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          :rules="[{ required: true, message: '变更方式不能为空'}]"
          label="变更方式"
          prop="rightType"
        >
          <el-radio-group v-model="targetUser.rightType">
            <el-radio :label="0">线下赠予</el-radio>
            <el-radio :label="1">线下售卖</el-radio>
            <el-radio :label="2">赠予撤销</el-radio>
            <el-radio :label="3">售卖撤销</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          style="margin-right: 10px"
          type="default"
          @click="showChange = false"
        >取消</el-button>
        <el-button
          type="primary"
          @click="doAction(4)"
        >确认</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="showCourse"
      title="课程权益"
      width="600px"
    >
      <el-form
        :model="targetUser"
        label-width="130px"
        size="small"
      >
        <el-form-item
          :rules="[{ required: true, message: '门票用户不能为空'}]"
          label="门票用户"
          prop="mobile"
        >
          <el-select
            v-model="targetUser.mobile"
            :remote-method="getUser"
            clearable
            filterable
            placeholder="输入手机号查询"
            remote
            style="width: 370px"
            @change="changeTicketUser"
          >
            <el-option
              v-for="item in userList"
              :key="item.id"
              :label="`${item.realName}/${item.mobile}`"
              :value="item.openId"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          style="margin-right: 10px"
          type="default"
          @click="showChange = false"
        >取消</el-button>
        <el-button
          type="primary"
          @click="showCourse = false"
        >确认</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogVisible"
      title="分享用户"
      width="70%"
    >
      <el-table
        :data="recommandList"
        size="small"
        style="width: 100%"
      >
        <el-table-column
          align="center"
          label="#"
          type="index"
        />
        <el-table-column
          align="center"
          label="openId"
          prop="openId"
        />
        <el-table-column
          align="center"
          label="微信昵称"
          prop="nickName"
        />
        <el-table-column
          align="center"
          label="手机号"
          prop="mobile"
        />
        <el-table-column
          align="center"
          label="头像"
          prop="headPic"
        >
          <template slot-scope="{ row }">
            <img
              :src="row.headPic"
              alt
              style="width: 60px; height: 60px"
            >
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="关注时间"
          prop="createTime"
        />
        <div slot="footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="dialogVisible = false"
          >确 定</el-button>
        </div>
      </el-table>
      <el-pagination
        :current-page.sync="pages.page"
        :page-size.sync="pages.size"
        :total="pages.total"
        class="flex flex-end"
        layout="total, prev, pager, next, sizes"
        style="margin-top: 8px"
        @current-change="pageChangeHandler"
        @size-change="sizeChangeHandler"
      />
    </el-dialog>
  </div>
</template>

<script>
import CRUD, { crud, form, header, presenter } from '@crud/crud'
import pagination from '@crud/Pagination'
import rrOperation from '@crud/RR.operation'
import { addOrder } from '@/api/disChangeApply'
import { Message } from 'element-ui'

const defaultForm = {
  openid: null,
  id: null,
  nickname: null,
  sex: null,
  language: null,
  city: null,
  province: null,
  country: null,
  headimgurl: null,
  subscribe: null,
  subscribeTime: null,
  unionid: null,
  remark: null,
  groupid: null,
  tagidList: null,
  status: null,
  mobile: null
}
export default {
  name: 'WxUser',
  components: { pagination, rrOperation },
  filters: {
    getIdentity(value, userList) {
      const item = userList.find((item) => item.itemNo === value)
      return item && item.title
    }
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({
      title: '微信用户',
      url: 'api/wxUser/disMember',
      idField: 'id',
      sort: 'id,desc'
    })
  },
  data() {
    return {
      permission: {},
      rules: {},
      queryTypeOptions: [{ key: 'nickname', display_name: '微信昵称' }],
      dialogVisible: false,
      list: [],
      recommandList: [],
      identityList: [],
      partnerList: [],
      pages: {
        openId: '',
        page: 0,
        size: 10,
        total: 0
      },
      showLock: false,
      showIdentity: false,
      showPartner: false,
      showTicket: false,
      showChange: false,
      showCourse: false,
      userList: [],
      targetUser: {
        mobile: '',
        rightType: 0
      }
    }
  },
  computed: {},
  mounted() {
    this.getIdentityList()
    this.getPartnerList()
  },
  methods: {
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    getIdentityList() {
      this.$http.get('/api/identityItem', { pageSize: 10000 }).then((_) => {
        const { content } = _
        this.identityList = content
      })
    },
    getPartnerList() {
      this.$http.get('/api/disPartner', { pageSize: 10000 }).then((_) => {
        const { content } = _
        this.partnerList = content
      })
    },
    viewUser(row, flag) {
      if (flag === 1) {
        this.showIdentity = true
        this.form = row
        const identity = this.identityList.find((item) => item.itemNo === this.form.identityNo)?.title || '无'
        this.form['identity'] = identity
        this.form['defaultNo'] = row.identityNo
        return
      } else if (flag === 2) {
        this.showPartner = true
        this.form = row
        const { superiorRealName, superiorMobile, superior } = row
        this.form['defaultOwnerMobile'] = superiorMobile || '无'
        this.form['defaultOwnerName'] = superiorRealName || '无'
        this.form['defaultOwnerId'] = superior || '无'
        return
      } else if (flag === 3) {
        this.form = row
        const { ticketNumber: defaultTicket } = row
        Object.assign(this.form, { defaultTicket })
        this.showTicket = true
      } else if (flag === 4) {
        this.form = row
        this.targetUser = { mobile: '', rightType: 0 }
        this.userList = []
        this.showChange = true
      }
    },
    doAction(flag) {
      if (flag === 1) {
        if (this.form.defaultNo === this.form.identityNo) {
          this.form = {}
          this.showIdentity = false
          return
        } else {
          const { id, identityNo } = this.form
          const identity = this.identityList.find((item) => item.itemNo === identityNo)
          const { title: identityName } = identity
          const params = {
            identityNo,
            id,
            identityName,
            member: this.form,
            defaultName: !this.form.defaultNo ? '无' : this.getDefaultName()
          }
          const body = {
            applyContent: JSON.stringify(params),
            applyType: 6,
            applyStatus: -1,
            refuseMsg: ''
          }
          addOrder(body).then((_) => {
            Message.success('操作成功!')
            this.showIdentity = false
          })
        }
      } else if (flag === 2) {
        if (this.form.defaultOwnerId === this.form.superior) {
          this.form = {}
          this.showPartner = false
          return
        } else {
          const { id, partner, superiorMobile, superiorNickName, superior, superiorRealName } = this.form
          const params = {
            id,
            member: this.form,
            defaultName: partner,
            superiorMobile,
            superiorRealName,
            superiorNickName,
            superior
          }
          const body = {
            applyContent: JSON.stringify(params),
            applyType: 5,
            applyStatus: -1,
            refuseMsg: ''
          }
          addOrder(body).then((_) => {
            Message.success('操作成功!')
            this.showPartner = false
          })
        }
      } else if (flag === 3) {
        const { id, ticketNumber } = this.form
        const params = {
          id,
          member: this.form,
          ticketNumber
        }
        const body = {
          applyContent: JSON.stringify(params),
          applyType: 4,
          applyStatus: -1,
          refuseMsg: ''
        }
        addOrder(body).then((_) => {
          Message.success('操作成功!')
          this.showTicket = false
        })
      } else if (flag === 4) {
        this.$refs['changeForm'].validate((valid) => {
          if (valid) {
            const { rightType, openId } = this.targetUser
            const params = {
              member: this.form,
              openId,
              rightType,
              originalOpenId: this.form.openId,
              targetUser: this.targetUser
            }
            const body = {
              applyContent: JSON.stringify(params),
              applyType: 3,
              applyStatus: -1,
              refuseMsg: ''
            }
            addOrder(body).then((_) => {
              Message.success('操作成功!')
              this.showChange = false
            })
          }
        })
      }
    },
    getUser(e) {
      if (!e) {
        this.userList = []
        return
      }
      this.$http
        .get('/api/wxUser', {
          params: { page: 0, size: 10000, mobile: e }
        })
        .then((_) => {
          const { content } = _
          this.userList = content
        })
    },
    changeUser(e) {
      const user = this.userList.find((item) => item.id === e)
      if (user) {
        const { mobile, realName, nickname, openId } = user
        this.form.superiorMobile = mobile
        this.form.superiorRealName = realName
        this.form.superiorNickName = nickname
        this.form.superior = openId
      }
    },
    changeTicketUser(e) {
      const item = this.userList.find((item) => item.openId === e)
      this.targetUser = item
    },
    getDefaultName() {
      const identity = this.identityList.find((item) => item.itemNo === this.form.defaultNo)
      return identity?.title
    },
    pageChangeHandler(e) {
      this.pages.page = e
      this.viewUser()
    },
    sizeChangeHandler(e) {
      this.pages.size = e
      this.viewUser()
    },
    viewLock(row) {
      console.log(row)
      this.showLock = true
    },
    viewCourse(row) {
      console.log(row)
      this.showCourse = true
    }
  }
}
</script>

<style scoped></style>
